<template>
	<view class="videoBox" @click="videoStatus">
		<video id="myVideo" :loop="true" :muted="false" :controls="false" :http-cache="true" :page-gesture="false"
			:show-fullscreen-btn="false" :show-loading="false" enable-play-gesture show-center-play-btn
			:enable-progress-gesture="false" :src="info.url" autoplay
			style='width:100vw;height: 100%; background-color: #000000; z-index: -1;'></video>
		<view class="info">
			<view class="title">
				{{info.title}}
			</view>
			<view class="content">
				{{info.remark}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					url: '',
					title: '',
					content: ''
				},
				video: null,
				play: false
			}
		},
		onLoad(option) {
			if (option.info) {
				this.info = JSON.parse(option.info)
				this.play = true
				console.log(this.info, 'info')
			}
		},
		methods: {
			videoStatus() {
				this.video = uni.createVideoContext('myVideo')
				if (this.play) {
					this.video.pause()
					this.play = false
				} else {
					this.video.play()
					this.play = true
				}
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.videoBox {
		height: 100%;

	}

	.info {
		width: 100%;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 39rpx;
		padding: 32rpx;
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		position: fixed;
		bottom: 0;
		box-sizing: border-box;

		.title {
			height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 42rpx;
			margin-bottom: 16rpx;
		}

		.content {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
	}
</style>